<template>
	<div class="app-container home">
		<el-row class="gutter1 bgWhite" :gutter="20" style="margin-left: 0;margin-right: 0;">
			<el-col :span="6" v-for="(item, index1) in gutter1" :key="index1">
				<div class="flex col-center gutter1-item cursor" :class="{ 'arrowActive': item.id == gId }"
					@click="gId = item.id">
					<img :src="getAssetURL(1, index1)" alt="donate" style="width:50px;" />
					<div>
						<div class="color2">{{ item.name }}</div>
						<div class="fb fs20 color333 mt15">{{ item.number || 0 }}</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="gutter1 mt20 bgWhite" style="padding: 20px 20px 30px;">
			<div class="flex col-center row-between">
				<span class="fb fs16 color333">快速菜单</span>
				<span class="main-color flex col-center cursor" @click="menuSet()">
					配置
					<el-icon class="ml4">
						<ArrowRight />
					</el-icon>
				</span>
			</div>
			<el-scrollbar style="height:100%;width:100%;white-space: nowrap;margin-top: 30px;">
				<div class="cursor text-center" style="margin: 0 auto;width: 180px;display: inline-block;"
					v-for="(item, index2) in gutter2" :key="index2" @click="gutter2Func(item, index2)">
					<!-- <img :src="getAssetURL(2,index2)" :alt="item.menuName" style="width:48px;" /> -->
					<img src="/src/assets/images/icon16.png" :alt="item.menuName" style="width:48px;" />

					<div class="color2 mt6">{{ item.menuName }}</div>
				</div>
			</el-scrollbar>
			<!-- <el-row class="mt25 bgWhite" :gutter="20">
				<el-col :span="3" v-for="(item,index2) in gutter2" :key="index2" @click="gutter2Func(item,index2)">
					<div class="cursor text-center" style="margin: 0 auto;max-width: 160px;">
						<img :src="getAssetURL(2,index2)" :alt="item.menuName" style="width:48px;" />
						<div class="color2 mt6">{{item.menuName}}</div>
					</div>
				</el-col>
			</el-row> -->
		</div>
		<el-row class="mt20" :gutter="20" style="margin-left: 0;margin-right: 0;">
			<el-col :sm="24" :lg="8" class="bgWhite radius8">
				<div class="title-text flex col-center row-between fb color333 fs16">
					<div>
						<span class="line"></span>
						<span class="ml8">业绩目标</span>
					</div>
					<div>
						<el-radio-group v-model="target1" size="small" @change="target1Func">
							<el-radio-button label="1009">本日</el-radio-button>
							<el-radio-button label="1005">本月</el-radio-button>
							<el-radio-button label="1001">本年</el-radio-button>
						</el-radio-group>
					</div>
				</div>
				<div id="my_pie_chart" style="height: 300px;">
					<img style="width: 210px;height: 210px;margin: 30px auto 0;display: block;"
						src="@/assets/images/line2.png" alt="" />
				</div>
				<div class="flex col-top row-between">
					<div class="flex col-end" style="padding: 30px 20px 40px;">
						<span class="line"></span>
						<div class="ml15">
							<div class="color2 fs14 flex col-center">目标金额（
								<dict-tag :options="bs_performance_targetunit" :value="unit" />
								）
							</div>
							<div class="fb fs24 color333 mt15">¥{{ annualTarget }}</div>
						</div>
					</div>
					<div class="flex col-end" style="padding: 30px 20px 40px;">
						<span class="line" style="background-color: #4DACB1;"></span>
						<div class="ml15">
							<div class="color2 fs14">完成金额（元）</div>
							<div class="fb fs24 color333 mt15">¥{{ orderTotalAmount }}</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :sm="24" :lg="1"></el-col>
			<el-col :sm="24" :lg="15" class="bgWhite radius8">
				<div class="flex row-between col-center pr20">
					<div class="title-text flex col-center fb color333 fs16">
						<span class="line"></span>
						<span class="ml8">业绩排行</span>
						<div class="ml30">
							<el-radio-group v-model="target2" size="small" @change="target2Func">
								<el-radio-button label="1009">本日</el-radio-button>
								<el-radio-button label="1005">本月</el-radio-button>
								<el-radio-button label="1001">本年</el-radio-button>
							</el-radio-group>
						</div>
					</div>
				</div>

				<el-table :data="performanceRankingDataList" ref="rankingDataListTable" border show-summary
					style="width: 100%;height:400px" >
					<el-table-column align="center" type="index" label="排名" width="80"></el-table-column>
					<el-table-column align="center" prop="userName" label="姓名"></el-table-column>
					<el-table-column align="center" prop="orderTotalAmount" label="业绩"></el-table-column>
					<el-table-column align="center" prop="orderAdd" label="订单量"></el-table-column>
					<!-- <el-table-column align="center" prop="commissionAmount" label="预计提成"></el-table-column> -->
				</el-table>
			</el-col>
		</el-row>

		<el-row class="mt20" :gutter="20" style="margin-left: 0;margin-right: 0;">
			<el-col :sm="24" :lg="24" class="bgWhite radius8">
				<div class="flex row-between col-center pr20">
					<div class="title-text flex col-center fb color333 fs16">
						<span class="line"></span>
						<span class="ml8">业绩排行</span>
						<div class="ml30">
							<el-radio-group v-model="target2" size="small" @change="target2Func">
								<el-radio-button label="1009">本日</el-radio-button>
								<el-radio-button label="1005">本月</el-radio-button>
								<el-radio-button label="1001">本年</el-radio-button>
							</el-radio-group>
						</div>
					</div>
					<div>
						<span class="relative dot dotTop dot1 pl13">目标金额</span>
						<span class="relative dot dotTop dot2 pl13 ml20">成交金额</span>
					</div>
				</div>
				<div id="my_line_chart" style="height: 450px;">
				</div>
			</el-col>
		</el-row>

		<el-row class="mt20" :gutter="20" style="margin-left: 0;margin-right: 0;">
			<el-col :sm="24" :lg="13" class="bgWhite radius8">
				<div class="plr20 pt10">
					<div class="title-text fb color333 fs16">
						<span>跟进计划</span>
					</div>
					<div>
						<div class="play radius8 mb20" v-for="(item, k) in followList" :key="k">
							<div class="flex row-between col-center">
								<div class="fb color333 fs16">
									<span>{{ item.customerName }}</span>
								</div>
								<div v-if="item.taskStatus == '1003'">
									<span class="relative dot color-red pl13">已超时{{ item.overtimeDay }}天</span>
								</div>
							</div>
							<div class="mt20 fs16 color2 text-line-1">
								{{ item.followupContent }}
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :sm="24" :lg="1"></el-col>
			<el-col :sm="24" :lg="10" class="bgWhite radius8">
				<div class="pl20 pt10">
					<div class=" title-text flex col-center row-between">
						<span class="fb fs16 color333">系统通知</span>
						<router-link to="/noticeList/noticeList">
							<span class="main-color flex col-center cursor">
								全部
								<el-icon class="ml4">
									<ArrowRight />
								</el-icon>
							</span>
						</router-link>

					</div>
					<div class="pr20">
						<router-link to="/noticeList/noticeList" class="flex row-between col-center"
							style="line-height: 50px;" v-for="(item, j) in noticeList" :key="j">
							<div class="relative pl13 fs14 color333 text-line-1" style="width: 270px;"
								:class="{ 'dot dot3': item.status == '1' }">{{ item.title }}</div>
							<div class="color2">
								<span>{{ item.sendTime }}</span>
							</div>
						</router-link>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 客户查重弹窗 -->
		<el-dialog v-model="dialogFormVisible" width="416" title="客户查重" center :align-center="true"
			custom-class="radius8">
			<el-form :model="form" ref="formRef" :rules="rules" label-width="110px">
				<el-form-item label="客户手机号" prop="phone" style="margin-bottom: 0;">
					<el-input size="large" v-model="form.phone" placeholder="请输入手机号"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer text-right" style="padding-top: 0;">
					<el-button type="primary" @click="submitForm" class="mainSubBtn">查 询</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 配置弹窗 -->
		<MenuDialogVue ref="menu" :menu="gutter2" @refreshData="getFastMenuList"></MenuDialogVue>
	</div>
</template>

<script name="Index">
import * as echarts from 'echarts';
import {
	customerIsExist //查重
} from "@/api/business/customer";
import {
	menuList, //当前用户菜单
	monthlyStatistics,//客户跟进订单成交查询
	fastMenuList,//快速菜单
	performanceData, //业绩目标
	performanceRanking, //业绩排行
	performanceRankingData, //业绩排行
	followupList, //跟进计划
	notificationList //系统通知
} from "@/api/business/workbenches";
import {
	ElNotification,
	arrowMiddleware
} from 'element-plus'
import MenuDialogVue from '../components/MenuDialog.vue';
export default {
	components: {
		MenuDialogVue
	},
	data() {
		return {
			bs_performance_targetunit: this.useDict('bs_performance_targetunit').bs_performance_targetunit,
			unit: '',
			target1: '1001',//1009=日，1005=月，1001（或空值默认）=年
			target2: '1001',//1009=日，1005=月，1001（或空值默认）=年
			dialogFormVisible: false,
			form: {
				phone: '',
			},
			performanceRankingDataList: [],
			rules: {
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					},
					{
						pattern: /^1[3-9]\d{9}$/,
						message: '请输入正确的手机号码',
						trigger: 'blur',
					},
				]
			},
			gId: 0,
			gutter1: [{
				id: 0,
				name: '当月新增客户',
				number: '',
				disabled: false,
				url: ''
			},
			{
				id: 1,
				name: '当月跟进次数',
				number: '',
				disabled: false,
				url: ''
			},
			{
				id: 2,
				name: '当月新增订单',
				number: '',
				disabled: false,
				url: ''
			},
			{
				id: 3,
				name: '当月成交金额（元）',
				number: '',
				disabled: false,
				url: ''
			},
			],
			gutter2: [{
				name: '新建客户',
				url: '/peoples/customer_add?id=1'
			},
			{
				name: '写新跟进',
				url: '/peoples/followup_record'
			},
			{
				name: '新建订单',
				url: '/order/orderAdd'
			},
			{
				name: '回款登记',
				url: '/payment/received'
			},
			{
				name: '客户查重',
				url: ''
			},
			{
				name: '客户管理',
				url: '/peoples/customer'
			},
			{
				name: '订单管理',
				url: '/order/myOrder'
			},
			{
				name: '订单审批',
				url: '/order/examineOrder'
			},
			],
			annualTarget: '', //目标金额
			orderTotalAmount: '', //成交金额
			annualTargetTransform: '',//目标金额换算
			rankList: [], //业绩排行
			queryParams: {
				pageNum: 1,
				pageSize: 5
			},
			followList: [], //跟进计划
			noticeList: [], //系统通知
		}
	},
	created() {
		this.getMonthlyStatistics()
		this.getPerformanceData()
	},
	methods: {
		//客户跟进订单成交查询
		getMonthlyStatistics() {
			monthlyStatistics().then(res => {
				let data = res.data
				this.gutter1[0].number = data.customerAdd
				this.gutter1[1].number = data.followupRecordAdd
				this.gutter1[2].number = data.orderAdd
				this.gutter1[3].number = data.orderTotalAmount || 0
				this.getFastMenuList()
			})
		},

		//快速菜单
		getFastMenuList() {
			fastMenuList().then(res => {
				this.gutter2 = res.data
			})
		},
		//配置菜单
		menuSet() {
			this.$refs.menu.open()
		},
		target1Func(e) {
			console.log(this.target1, 'eeee')
			this.getPerformanceData(1)
		},
		target2Func(e) {
			console.log(this.target2, 'eeee')
			this.getPerformanceRanking()
			this.getPerformanceRankingData()
		},
		//业绩目标
		getPerformanceData(num) {
			let data = {
				type: this.target1
			}
			performanceData(data).then(res => {
				this.unit = res.data.targetUnit
				this.annualTarget = res.data.annualTarget * 1 || 0 //目标金额
				this.annualTargetTransform = res.data.annualTargetTransform * 1 || 0 //目标换算金额
				this.orderTotalAmount = res.data.orderTotalAmount * 1 || 0 //成交金额
				setTimeout(() => {
					this.pieChart = echarts.init(document.getElementById("my_pie_chart"));
					this.initPie();
				}, 200)
				if (num != 1) {
					this.getPerformanceRanking() //业绩排行
					this.getPerformanceRankingData() //业绩排行
				}
			})
		},
		initPie() {
			let finish = this.annualTarget == 0 ? 0 : ((this.orderTotalAmount / this.annualTargetTransform) * 100).toFixed(0) + '%'
			this.pieChart.setOption({
				title: {
					text: '完成度' + finish,
					left: 'center',
					top: 'center'
				},
				color: ['rgba(77, 172, 177, 1)', '#F7F7F7',],
				series: [{
					type: 'pie',
					data: [{
						value: this.orderTotalAmount,
						name: '完成金额',
					},
					{
						value: this.annualTargetTransform - this.orderTotalAmount,
						name: '目标金额',
					},
					],
					emphasis: {
						itemStyle: {
							color: 'inherit', // 这里设置悬停时的颜色
						}
					},
					label: {
						show: false
					},
					hoverAnimation: false,
					radius: ['40%', '70%']
				}]
			});
		},
		//业绩排行
		getPerformanceRanking() {
			let data = {
				pageNum: 1,
				pageSize: 1000,
				keyword: this.target2
			}
			performanceRanking(data).then(res => {
				let rankData = res.rows
				let arr1 = []
				let arr2 = []
				let nameArr = []
				for (let key in rankData) {
					nameArr.push(rankData[key].userName)
					arr1.push(rankData[key].orderTotalAmount)
					arr2.push(rankData[key].annualTargetTransform)
				}
				console.log(arr1, 'arr1')
				setTimeout(() => {
					this.lineChart6 = echarts.init(document.getElementById("my_line_chart"));
					this.init(nameArr, arr1, arr2);
				}, 200)
				this.getFollowupList()
			})
		},
		//业绩排行
		getPerformanceRankingData() {
			let data = {
				pageNum: 1,
				pageSize: 1000,
				keyword: this.target2
			}
			performanceRankingData(data).then(res => {
				console.log("1111111111111111", res.data);
				this.performanceRankingDataList = res.data
			})
		},
		init(nameArr, orderTotalAmountArr, annualTarget) {
			this.lineChart6.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: "10px",
					right: "10px",
					bottom: "30px",
					containLabel: true
				},
				xAxis: {
					show: true,
					data: nameArr, //年份
				},
				yAxis: {},
				series: [{
					name: '目标金额',
					type: 'bar',
					data: annualTarget,
					color: ['#FFC300'],
					barWidth: '14px',
					barGap: 0,
				},
				{
					name: '成交金额',
					type: 'bar',
					data: orderTotalAmountArr,
					color: ['#4DACB1'],
					barWidth: '14px'
				},
				]
			});
		},
		// 跟进计划
		getFollowupList() {
			followupList(this.queryParams).then(res => {
				this.followList = res.rows
				this.getNotificationList()
			})
		},
		//系统通知
		getNotificationList() {
			notificationList(this.queryParams).then(res => {
				this.noticeList = res.rows
			})
		},

		// 客户查重提交
		submitForm() {
			this.$refs['formRef'].validate((valid) => {
				if (valid) {
					customerIsExist(this.form.phone).then(res => {
						// ElNotification({
						// 	title: 'Error',
						// 	message: '该用户不存在',
						// 	type: 'error',
						// })
						this.$modal.msgError('该用户不存在')
						// this.dialogFormVisible = false
					})
				}
			})
		},
		gutter2Func(item, index) {
			// 点击客户查重
			if (item.menuName == '客户查重') {
				this.form.phone = ''
				this.dialogFormVisible = true
			} else {
				this.$router.push(item.path);
			}
		},
		getAssetURL(num, index) {
			// 参数一: 相对路径   参数二: 当前路径的URL
			if (num == 1) {
				return new URL(`/src/assets/images/icon${index + 6}.png`, import.meta.url).href
			} else {
				return new URL(`/src/assets/images/icon1${index}.png`, import.meta.url).href
			}
		}
	}
}
</script>

<style scoped lang="scss">
.gutter1 {
	border-radius: 4px;
	padding: 30px 20px;
}

.gutter1-item {
	height: 100px;
	width: 247px;
	margin: 0 auto;
	border-radius: 4px;
	padding: 30px;
	background: #F7F8FA;
	border: 1px solid #F7F8FA;

	img {
		margin-right: 15px;
	}
}

.arrowActive {
	border: 1px solid #4DACB1;
	position: relative;
	background-color: #EDF6F7;

	&::after {
		content: '';
		position: absolute;
		left: 2px;
		top: 2px;
		border-width: 6px;
		border-style: solid;
		border-color: #4DACB1 transparent transparent #4DACB1;
		border-radius: 4px 0 0 0;
	}
}

.title-text {
	padding: 20px 20px 20px 0;
	position: relative;
}

.title-text span.line {
	position: absolute;
	left: -10px;
	display: inline-block;
	width: 5px;
	height: 22px;
	opacity: 1;
	border-radius: 0px 4px 4px 0px;
	background: #4DACB1;
}

.line {
	width: 8px;
	height: 57px;
	opacity: 1;
	background: #FFC300;
}

.dot::before {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	top: 21px;
	left: 0;
}

.dotTop::before {
	top: 4px;
}

.dot1::before {
	background-color: #FFC300;
}

.dot2::before {
	background-color: #4DACB1;
}

.dot3::before {
	background-color: #FF001C;
}

.play {
	box-shadow: 0px 0px 6px #3683f71f;
	padding: 20px;
}

.home {
	blockquote {
		padding: 10px 20px;
		margin: 0 0 20px;
		font-size: 17.5px;
		border-left: 5px solid #eee;
	}

	hr {
		margin-top: 20px;
		margin-bottom: 20px;
		border: 0;
		border-top: 1px solid #eee;
	}

	.col-item {
		margin-bottom: 20px;
	}

	ul {
		padding: 0;
		margin: 0;
	}

	font-family: "open sans",
	"Helvetica Neue",
	Helvetica,
	Arial,
	sans-serif;
	font-size: 13px;
	color: #676a6c;
	overflow-x: hidden;

	ul {
		list-style-type: none;
	}

	h4 {
		margin-top: 0px;
	}

	h2 {
		margin-top: 10px;
		font-size: 26px;
		font-weight: 100;
	}

	p {
		margin-top: 10px;

		b {
			font-weight: 700;
		}
	}

	.update-log {
		ol {
			display: block;
			list-style-type: decimal;
			margin-block-start: 1em;
			margin-block-end: 1em;
			margin-inline-start: 0;
			margin-inline-end: 0;
			padding-inline-start: 40px;
		}
	}
}
</style>